<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>焦点学苑</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
<!-- 引入JQuery -->
<script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- vue -->
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<!-- axios -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<!-- 组件 -->
<script src="js/top.js"></script>
<script src="js/category.js"></script>
<!-- layui -->
<link rel="stylesheet" href="webjars/layui/2.5.6/css/layui.css"
	media="all">
<style>
a{ text-decoration: none;color:#fff; }
</style>
</head>

<body>
<div class="head-box" id="login1">
    <div class="head wrap">
          <div class="logo fl"><a href=""><img src="images/logo.png"></a></div>
          <div class="head-right fr">
              <div class="head-a fr">
                   <div class="hgt fl"><img src="images/hgt.png">
                         <div class="hgt-top">
                             <input type="text" class="hgt-text">
                         </div>
                   </div>
                  <!--  <div class="head-a1 fl"><a href=""><img src="images/tb-a.png"></a></div>
                   <div class="head-a1 fl"><a href=""><img src="images/tb-b.png"></a></div>
                   <div class="head-a3 login-click fl">登录</div>
                   <div class="head-a4 reg-click fl">注册</div> -->
              
              </div>
              <top></top>
              <div class="clearfix"></div>
              <div class="nav fr">
                  <ul>
                       <li><a href="index.html">首页</a></li>
                       <li><a href="">文章</a>
                           <category></category>
                       </li>
                       <li><a href="community.html">社区</a></li>
                       <li><a href="course.html">课程</a></li>
                       <li class="nav-cut"><a href="active.html">活动</a></li>
                       <li><a href="contact.html">联系我们</a></li>
                  
                  </ul>
              </div>
              <div class="clearfix"></div>
          </div>
    </div>
    
<!--登录注册弹窗-->
<div class="mask"></div>
<div class="login">
    <div class="login-title">
        <div class="login-a">登录</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input v-model="user.uname" type="text" class="login-text" placeholder="注册时填写的用户名"></div>
        <div class="login-d"><input v-model="user.upass" type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input @click.prevent="login" type="button" class="login-btn" value="登录"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
             <span>还没有焦点账号?><a href="javascript:;" class="reg-href">点击注册</a></span>
        </div>
    </div>
</div>

<div class="reg">
    <div class="login-title">
        <div class="login-a">注册</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input v-model="user.uname" type="text" class="login-text" placeholder="邮箱/手机号"></div>
        <div class="login-d"><input v-model="user.upass" type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input @click.pervent="regist" type="button" class="login-btn" value="注册"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
        </div>
    </div>
</div>
</div>
<script>
	var v1 = new Vue({
		el:"#login1",
		data:{
			user:{uname:"",upass:""},
			
		},
		methods:{
			login(){
				var params = new URLSearchParams();
				params.append("username",this.user.uname);
				params.append("password",this.user.upass);
				axios.post("user/login.s",params).then(res=>{
					if(res.data.code){
						$(".mask,.login").css("display", "none");
						$("#loginAndUser").hide();
						$("#uname").show();
						//用户名文本对应
						$("#uname").text(this.user.uname);
						//隐藏“注册”div
						$("#newUser").hide();
					}else{
						$("#newUser").show();
						alert(res.data.msg);
					}
				
				})
			},
			regist(){
				var params = new URLSearchParams();
				params.append("username",this.user.uname);
				params.append("password",this.user.upass);
				axios.post("user/regist.s",params).then(res=>{
					if(res.data.code){
						alert("注册成功！");
						$(".msk,.reg").css("display","none");
						
					}else{
						alert(res.data.msg);
						
					}
				})
			}
		}
	})
</script>

<div class="content">
    <div class="col-height"></div>
    <div class="focus-banner">
           <div class="wrap">
                <div class="focus-a1"><img :src="jpg"  style="height:151px;width:151px"></div>
                <div class="focus-a2">{{name}}</div>
               <div class="focus-a3">
                          <div class="py-a fl"><a href="user-article.html">主页</a></div>
                          <div class="pyl  fl">关注 500
                              <div class="tbq">
                                  <div class="tbq-a">我是大大大</div>
                                  <div class="tbq-a">我是大大大</div>
                                  <div class="tbq-a">我是大大大</div>
                                  <div class="tbq-a">我是大大大</div>
                              </div>
                          </div>
                          <div class="py-a fl">粉丝 500</div>
                          <div class="py-b fl">注册时间 {{date}}</div>
                </div>
                <div class="focus-a4"><a href="">+关注</a><span>|</span><a href="">私信</a></div>
           </div>    
    </div>
    
    <div class="focus-b-box">
                <div class="focus-list"><div class="focus-title">{{name}} 收藏的文章</div></div>
                <div class="coll-box" v-for="f in list">
                         <ul class="col-ul">
                              <li>
                                   <div  class="col-list"><a :href="'article-details.html#' + f.tid">
                                              <div class="col-a fl"><img :src="f.aimg"></div>
                                              <div class="col-b fl">
                                                    <div class="col-b1">{{f.atitle}}</div>
                                                    <div class="col-b2"><img :src="jpg" style="height:32px;width:32px">{{name}}<span>{{f.cdate}}</span></div>
                                                    <div class="col-b3">{{f.introduction}}</div></a>
                                              </div>
                                              <div class="col-c">
                                                    <span><img src="images/col-c1.jpg">0</span>
                                                    <!-- <span><img src="images/col-c2.jpg">3</span> -->
                                                    <em><img src="images/col-c3.jpg"></em>
                                                    <em><img src="images/col-c4.jpg"></em>
                                                    <em><img @click.prevent="remove(f.tid)" src="images/ashbin2.png"></em>
                                              </div>
                                     </div>         
                              </li>
                              <!-- <li>
                                   <div class="col-list">
                                              <div class="col-a fl"><img src="upload/col-a.jpg"></div>
                                              <div class="col-b fl">
                                                    <div class="col-b1">教你如何一步步把妹子泡到手</div>
                                                    <div class="col-b2"><img src="upload/col-b.jpg">shuiguodaren<span>2015-11-02</span></div>
                                                    <div class="col-b3">爱情的残酷之处在于，并不是你做了什么帮助你获得了女孩的欢心。</div>
                                              </div>
                                              <div class="col-c">
                                                    <span><img src="images/col-c1.jpg">0</span>
                                                    <span><img src="images/col-c2.jpg">3</span>
                                                    <em><img src="images/col-c3.jpg"></em>
                                                    <em><img src="images/col-c4.jpg"></em>
                                                    <em><img src="images/col-c5.jpg"></em>
                                              </div>
                                     </div>         
                              </li>
                              <li>
                                   <div class="col-list">
                                              <div class="col-a fl"><img src="upload/col-a.jpg"></div>
                                              <div class="col-b fl">
                                                    <div class="col-b1">教你如何一步步把妹子泡到手</div>
                                                    <div class="col-b2"><img src="upload/col-b.jpg">shuiguodaren<span>2015-11-02</span></div>
                                                    <div class="col-b3">爱情的残酷之处在于，并不是你做了什么帮助你获得了女孩的欢心。</div>
                                              </div>
                                              <div class="col-c">
                                                    <span><img src="images/col-c1.jpg">0</span>
                                                    <span><img src="images/col-c2.jpg">3</span>
                                                    <em><img src="images/col-c3.jpg"></em>
                                                    <em><img src="images/col-c4.jpg"></em>
                                                    <em><img src="images/col-c5.jpg"></em>
                                              </div>
                                     </div>         
                              </li> -->
                         </ul>
                     </div>
                     
               <div class="more">
<!--                分页 -->
               <div id="demo1" ></div>
               </div>       
    </div>  
</div>

<script src="webjars/layui/2.5.6/layui.all.js" charset="utf-8"></script>
<script >
var v2 = new Vue({
	el:".content",
	data:{
		name:"",
		jpg:"",
		date:"",
		list:[],
		total :100,
	},
	created(){
		var params = new URLSearchParams();
		let url="collect/selectCollect.s?page=1&size=10";

		axios.get(url).then(res=>{
			this.list =res.data.list;
			this.total=res.data.total;
			
			layui.laypage.render({
			    elem: 'demo1'
			    ,count:res.data.total	
			    ,jump:obj=>{
			    	url="collect/selectCollect.s?page="+obj.curr+"&size=10";
			    	console.info(res.data.total)
			    	axios.get(url).then(res=>{
			    		this.list =res.data.list;
			    	});
			    }
			  });
			
		}),
		axios.post("getloginUser.s",params).then(res=>{
			this.name=res.data.uname;
			this.jpg=res.data.ujpg;
			this.date=res.data.ubt;
			
		})
		
	},
	methods:{
		remove(tid){
			console.info("--=-tid:"+tid);
			var params = new URLSearchParams();
			params.append("tid",tid);			
			axios.post("article/deleteCollect.s",params).then(res=>{
				alert(res.data.msg);			
			})
			alert("删除成功！");
			location.href="user-collection.html";
		},
	}
})
</script>
<div class="footer">
   <div class="wrap">
      <div class="foot">
            <div class="foot-left fl">
                 <a href="">关于我们</a>
                 <a href="">加入我们</a>
                 <a href="contact.html">联系我们</a>
                 <a href="">媒体采访</a>
            </div>
            <div class="foot-c fl"><a href=""><img src="images/foot-logo.jpg"></a></div>
            <div class="foot-right fr">
                 <a href="">同城活动</a>
                 <a href="">课程资讯</a>
                 <a href="">最新发布</a>
                 <a href="">热门文章</a>
            </div>
       </div> 
       <div class="foot-btm">网页制作by云邦</div>    
   </div>
</div>



<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/Action.js"></script>
<script>
         $(".pyl").click(function(){
					     $(this).find(".tbq").slideToggle()
					})
        </script>

</body>
</html>
